<template>


  <div class="mod-config">
    <el-form :inline="true" >
      <el-form-item>

        <el-button  type="primary" @click="onClick()">查询</el-button>
      </el-form-item>
    </el-form>
    <div>
      <el-dialog title="请输入信息" :visible.sync="dialogVisible">
        <el-input v-model="idCard"></el-input>
        <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取消</el-button>
        <el-button type="primary" @click="getDataList()">确定</el-button>
      </span>
      </el-dialog>
    </div>
    <div v-show="shopShow" id="chartLineBox" style="width: 1500px;height: 85vh;"> </div>
  </div>
</template>
<script>
import echarts from "echarts";
export default {
  name: "",
  data() {

    return {
      shopShow: false, //默认内容不显示
      dialogVisible: false,
      idCard: '',
      dataForm: {
        myData :[],
        b : 0,
        key: '',
        idCard: ''
      },

      dataList: [],
      pageIndex: 1,
      pageSize: 10,
      totalPage: 0,
      dataListLoading: false,
      dataListSelections: [],
      addOrUpdateVisible: false,
      charts: "",
      opinionData: [],
      xdata : ""

    }
  },
  methods : {
    // 获取数据列表
    getDataList () {
      this.dataListLoading = true
      this.$http({
        // url: this.$http.adornUrl('/menu/persondish/list'),
        url: `http://localhost:8081/menu/persondish/list`,
        method: 'get',
        params: this.$http.adornParams({
          'page': this.pageIndex,
          'limit': this.pageSize,
          'idCard': this.idCard
        })
      }).then(({data}) => {
        if (data && data.code === 0) {
          this.dataList = data.page.list
          // console.log(this.dataList[0].fat)
          this.dataForm.myData = [this.dataList[0].energy,this.dataList[0].protein,this.dataList[0].carbohydrate,this.dataList[0].fat,
            this.dataList[0].sugar,this.dataList[0].saturatedFat,this.dataList[0].transFat,this.dataList[0].cholesterol,this.dataList[0].sodium]
          this.shopShow = true

          this.mountedx()
          this.dialogVisible = false

        }else {

          this.shopShow = false //使false变为true显示
          this.dialogVisible = false
        }

      })
    },

    onClick () {
      this.dialogVisible = true
    },
    mountedx (){
      this.chartLine = echarts.init(document.getElementById('chartLineBox'));
      // 指定图表的配置项和数据
      var option = {
        tooltip: {              //设置tip提示
          trigger: 'axis'
        },

        legend: {               //设置区分（哪条线属于什么）
          data:['标准','我的']
        },
        color: ['#8AE09F', '#FA6F53'],       //设置区分（每条线是什么颜色，和 legend 一一对应）
        xAxis: {                //设置x轴
          type: 'category',
          boundaryGap: false,     //坐标轴两边不留白
          data: ['能量', '蛋白质', '碳水化合物', '脂肪', '糖', '饱和脂肪', '反式脂肪','胆固醇'],
          name: '营养标签',           //X轴 name
          nameTextStyle: {        //坐标轴名称的文字样式
            color: '#FA6F53',
            fontSize: 16,
            padding: [0, 0, 0, 20]
          },
          axisLine: {             //坐标轴轴线相关设置。
            lineStyle: {
              color: '#FA6F53',
            }
          }
        },
        yAxis: {
          name: '数据',
          nameTextStyle: {
            color: '#FA6F53',
            fontSize: 16,
            padding: [0, 0, 10, 0]
          },
          axisLine: {
            lineStyle: {
              color: '#FA6F53',
            }
          },
          type: 'value'
        },
        series: [
          {
            name: '我的',
            data:  this.dataForm.myData,
            type: 'line',               // 类型为折线图
            lineStyle: {                // 线条样式 => 必须使用normal属性
              normal: {
                color: '#8AE09F',
              }
            },
          },
          {
            name: '标准',
            data: [50, 100, 79, 67, 34, 98, 34,65],
            type: 'line',
            lineStyle: {
              normal: {
                color: '#FA6F53',
              }
            },
          }
        ]
      };

      // 使用刚指定的配置项和数据显示图表。
      this.chartLine.setOption(option);
    },

  },



};
</script>
<style scoped>
</style>
